<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
 <%@ include file="../../include.jsp" %> 
 <%@ include file="../../mobilehead_inc.jsp" %> 
<script type="text/javascript" src="${ctx }/plugin/jquery.fly/jquery.fly.min.js"></script> 
<title>商品分类</title>
<script type="text/javascript">
	//获得商品和公告
	var commodityData;
	 $(document).on('pageinit', function () {			  
	    $.ajax({
	        url: '${ctx}/mobile/getCommodity',
	        dataType: "json",
	        async: true,
	        success: function (result) {		        	
	        	if(result.obj != null){
	        		console.log(result);
	        		console.log(result.rows);
	        		var commodityInfo = result.obj;
	        		 var sortCommodity = new Array();
	        		 for(var i = 0; i<commodityInfo.length; i++) {
	        				//console.log(commodityInfo[i]);
	        				 for(var y = 0; y <commodityInfo.length-i-1; y++){
	        					if(commodityInfo[y].commodityCategory.categoryId >= commodityInfo[y+1].commodityCategory.categoryId){
	        						var temp = commodityInfo[y];       						
	        						commodityInfo[y] = commodityInfo[y+1];
	        						commodityInfo[y+1] = temp;
	        						
	        					}
	        					
	        				}
	        				 sortCommodity.push(temp);
	        				 	        				
	        			}
	        		 console.log(sortCommodity);
	        		//分组	        		
					flag = 0;
					data = [];          
					for(var i = 0; i<result.obj.length; i++) {
					    var az = '';
					    for (var j = 0; j < data.length; j++) {
					        if(data[j][0].commodityCategory.name == result.obj[i].commodityCategory.name) {
					            flag = 1;
					            az = j;
					            break;
					        }
					    }
					    if(flag == 1){
					        data[az].push(result.obj[i]);
					        flag = 0;
					    } else if (flag == 0) {
					        wdy = new Array();
					        wdy.push(result.obj[i]);
					        data.push(wdy);
					    }
					}
					console.log(data);
					console.log(data[0][0].commodityCategory.name);
					commodityData = data;
					for(i=0;i<data.length;i++){ 
						$(".menu-item:first").attr("style","background:#ffffff;color:red");
						$(".leftmenu").append("<div class='menu-item'>"+data[i][0].commodityCategory.name+"</div>");												
					} 
					commodityCategory($(".menu-item:first").text(), data);
						
					/* for(i=0;i<1;i++){ 
						$('#goods_list').find('table').append(
                                
			        			"	 <thead id=thead"+i+">                            "+
					            "       <td>                            "+
					            //"           <a></a><strong id=strong"+i+">"+data[i][0].commodityCategory.name+"</strong>"+
					            "       </td>                           "+						           						            						           
			               		"</thead>                               "+
			               		"<tbody id=tbody"+i+">								"+
			               		"</tbody>								"	
			        		
			        		);						
						var index_tr = 0;
						$(data[i]).each(function(k,info){														
							if(k>0&&k%2==0){index_tr++;}
							if(k%2==0){$("#tbody"+i).append("<tr id=tr"+index_tr+""+i+"></tr>");} 
							  $("#tr"+index_tr+i).append(
	        						
	        						"  <td>                                                                "+
	        						"	<div class='goods_item'>                                           "+
	        						"		<img src='"+info.photo+"'>                         "+
	        						"		<a>"+info.names+"</a>                                                  "+
	        						"		<a class='goods_price'>￥ <del>"+info.nativePrice+"</del><strong>"+info.price+"</strong></a> "+
	        						"		<div><img src='../../../images/cart.png'></div>                "+
	        						"		<input type='hidden' value='"+info.commodityId+"' class='goods_id' />             "+
	        						"		<input type='hidden' value='"+info.number+"' class='goods_left' />           "+
	        						"	</div>                                                             "+
	        						"</td>                                                                 "		        					
	        					); 							
						});						
					   }  */
					 /* for(i=0;i<data.length;i++){ 
						$(".menu-item:first").attr("style","background:#ffffff;color:red");
						$(".leftmenu").append("<div class='menu-item'>"+data[i][0].commodityCategory.name+"</div>");
						
						
						$('#goods_list').find('table').append(
                                
			        			"	 <thead id=thead"+i+">                            "+
					            "       <td>                            "+
					            //"           <a></a><strong id=strong"+i+">"+data[i][0].commodityCategory.name+"</strong>"+
					            "       </td>                           "+						           						            						           
			               		"</thead>                               "+
			               		"<tbody id=tbody"+i+">								"+
			               		"</tbody>								"	
			        		
			        		);						
						var index_tr = 0;
						$(data[i]).each(function(k,info){														
							if(k>0&&k%2==0){index_tr++;}
							if(k%2==0){$("#tbody"+i).append("<tr id=tr"+index_tr+""+i+"></tr>");} 
							  $("#tr"+index_tr+i).append(
	        						
	        						"  <td>                                                                "+
	        						"	<div class='goods_item'>                                           "+
	        						"		<img src='"+info.photo+"'>                         "+
	        						"		<a>"+info.names+"</a>                                                  "+
	        						"		<a class='goods_price'>￥ <del>"+info.nativePrice+"</del><strong>"+info.price+"</strong></a> "+
	        						"		<div><img src='../../../images/cart.png'></div>                "+
	        						"		<input type='hidden' value='"+info.commodityId+"' class='goods_id' />             "+
	        						"		<input type='hidden' value='"+info.number+"' class='goods_left' />           "+
	        						"	</div>                                                             "+
	        						"</td>                                                                 "		        					
	        					); 							
						});						
					   }  */
					 	        				        	
	       		}
	        },
	        error: function (request, error) {
	        	$("#queryCom").append("<div class='am-alert'> 暂时没有推荐哦 ！ </div>");
	        }
	        
	    });    
	}); 
	
	 function InitFly()
	{
		var offset = $("#circle_cart_count").offset(); 
		
	    $(".goods_item").click(function(event){ 
	        var addcar = $(this); 
	        var img = addcar.children('img').attr('src'); 
			var commodityId = addcar.find('.goods_id').val();
			var leftCount = parseInt(addcar.find('.goods_left').val());
			console.log(commodityId,leftCount);
	        var flyer = $('<img class="u-flyer" src="'+img+'">'); 
	        flyer.fly({ 
	            start: { 
	                left: event.clientX, //开始位置（必填）#fly元素会被设置成position: fixed 
	                top: event.clientY //开始位置（必填） 
	            }, 
	            end: {
					 
	                left: offset.left, //结束位置（必填） 
	                top: offset.top, //结束位置（必填） 
	                width: 6, //结束时宽度 
	                height: 6 //结束时高度
					 
	            }, 
	            onEnd: function(){ //结束回调 
					AddToCart(commodityId, 1, leftCount);
					
					$("#circle_cart_count").html(GetCartCount());
					
	                this.destroy() //移除dom 
	            } 
	        }); 
	    }); 
	}
	 
	 function commodityCategory(name, data){
		 var categoryData;		 
		 for(i = 0; i <data.length; i++){
			 if(name == data[i][0].commodityCategory.name){
				 categoryData = data[i];
				 break;
			 }							 	 
		 }
		 console.log(categoryData);
		 $('#goods_list').find('table').html(
                 
     			/* "	 <thead id=thead>                            "+
		            "       <td>                            "+
		            //"           <a></a><strong id=strong"+i+">"+data[i][0].commodityCategory.name+"</strong>"+
		            "       </td>                           "+						           						            						           
            		"</thead>                               "+ */
            		"<tbody id='tbody'>								"+
            		"</tbody>								"	
     		
     		);						
			var index_tr = 0;
			$(categoryData).each(function(k,info){														
				if(k>0&&k%2==0){index_tr++;}
				if(k%2==0){$("#tbody").append("<tr id=tr"+index_tr+""+i+"></tr>");} 
				  $("#tr"+index_tr+i).append(
						
						"  <td>                                                                "+
						"	<div class='goods_item'>                                           "+
						"		<img src='"+info.photo+"'>                         "+
						"		<a>"+info.names+"</a>                                                  "+
						"		<a class='goods_price'>￥ <del>"+info.nativePrice+"</del><strong>"+info.price+"</strong></a> "+
						"		<div><img src='${ctx }/images/cart.png'></div>                "+
						"		<input type='hidden' value='"+info.commodityId+"' class='goods_id' />             "+
						"		<input type='hidden' value='"+info.number+"' class='goods_left' />           "+
						"	</div>                                                             "+
						"</td>                                                                 "		        					
					); 							
			});	
		 
			$('.goods_item').children('a').width(window.screen.width/3 - 20);
			
			var _width = $('.goods_item').children('img').width();	
			
			$('.goods_item').children('img').height(_width); 
			InitFly();	 
	 }
	 
	 $(function(){
			$(".leftmenu").on("click",".menu-item",function(){
				
		  		$(".leftmenu .menu-item").eq($(this).index()).attr("style","background:#ffffff;color:red").siblings().removeAttr("style");
		  		$('#goods_list tbody').remove();
		  		var name = $(this).text();		  		
		  		commodityCategory(name, commodityData);
			});
		});
	 	 
</script>
<script type="text/javascript">
	
</script>
<style type="text/css">
#queryCom img {
   width:40%;
   height:150px;
   border: 5px;
   margin: 5px;
   border-color: gray
}
#mydiv{
	border: 1px solid white;
	text-align: center;
	padding: 2px
}
#myform{
	margin-left: 5px;
	margin-right: 5px;
	}
.notice{
    width: 100%;
    height: 25px;   
    background: #f8f8f8;
}
.notice-a{
margin-left:2%;
position:absolute;
width:20%;
}
.notice-c{
margin-left:18%;
display:block;
width:78%;
height:25px;

}

/*商品css*/
.good_category{

width:100%;
height:30px;
background:#eee;

}

#goods_list
{
	width: 100%;
	margin-bottom: 49px;
	
}

#goods_list table
{
	width: 100%;
	border-collapse: collapse;
	background-color: #fff;
	overflow:auto;
}

#goods_list thead td a
{
	float: left;
	height: 20px;
	width: 4px;
	background-color: #ccc;
	margin: 12px 11px;
}

#goods_list thead td strong
{
	float: left;
	margin: 10px 0px;
}

 #goods_list tbody td
{
	width: 33.3%;
    border-right: 10px solid #ffffff;
    border-left: 10px solid #ffffff;
    overflow: hidden;
    border-radius: 7px;
    background-color: #f5f5f5;
    border-top: 10px solid #ffffff;
    border-bottom: 10px solid #ffffff;
}
 
/* #goods_list tbody td.empty
{
	border: 0;
} */

 .goods_item
{
	position: relative;
	width: 100%;
} 

.goods_item img
{
	width: 100%;
	height:106px;
	border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.goods_item a
{
	display: block;
	margin: 4px 8px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	/* text-align: center; */
}

.goods_item .goods_price
{
	color: #f93916;
}

.goods_item .goods_price strong
{
	font-size: 16px;
}

.goods_item div
{
	position: absolute;
	height: 18px;
	bottom: 0px;
	right: 0px;
	border-left: 1px dashed #cccccc;
}

.goods_item div img
{
	width: 33px;
	height: 18px;
}

.u-flyer
{
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	position: fixed;
	z-index: 9999;
}
.title_main
{
	text-align: center;
	width: 100%;
	height: 40px;
	/* background-image: url(../images/pay_bkg_top.png);
	background-size: 100% 40px;
	background-repeat: no-repeat; */
	background-color: #9999ff;
	position:fixed;
	z-index:1001;
}

.title_main a
{
	display: block;
	font-size: 15px;
	line-height: 40px;
	color: #ffffff;
}
.menu-item{

	width:100%;
	height:50px;
	font-size: 85%;
    text-align: center;
    /* background-color: #ffffff; */ 
    line-height: 50px;
    
}

/* .menu-item:active{
    background-color: #ffffff;    
} */
</style>

</head>
<body>
	<div class="title_main">
            <a>商品分类</a>
     </div>
     
     
<!-- 动态显示商品 -->

	<div style="padding-top:40px;position:absolute;">
	
	<div class="leftmenu" style="width:20%;height:100%;float:left;position:fixed;" >
	</div>
		 
	<div  style="width:80%;height:100%;float:right;">
		<div id="goods_list">
 			<table>	</table>               
    	</div>
	</div>
	
	</div>
	 <!-- <div style="width:20%;height:100%;float:left;padding-top:40px;" >
		<div style="width:100%;height:100%;">
		 <div style="line-height: 90px; height: 90px;position: relative;color: #777;" >酒水饮料</div>
		
		
		</div> 
	</div>
	<div  style="padding-top:40px;width:80%;float:left;">
		<div id="goods_list" style="width:100%;height:100%;" >
 			<table>	</table>               
    	</div>
	</div>  -->
		   
<!-- 底部 -->
 <jsp:include page="bottombar.jsp">
	    <jsp:param name="index" value="2"/>
  </jsp:include> 
</body>
</html>